<template>

  <div class="login">
    <h1 class="title">欢迎登录-毕业生招聘系统</h1>
    <div class="center">
      <a-form
          :model="formState"
          class="login-form"
          name="normal_login"
          ref="fromRef"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
      >
        <a-form-item
            :rules="[{ required: true, message: '请输入你的账号!' }]"
            label="账号"
            name="account"
        >
          <a-input v-model:value="formState.account">
            <template #prefix>
              <UserOutlined class="site-form-item-icon"/>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
            :rules="[{ required: true, message: '请输入你的密码!' }]"
            label="密码"
            name="password"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon"/>
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
            :rules="[{ required: true, message: '请选择你的角色!' }]"
            label="角色" name="role">
          <a-radio-group v-model:value="formState.role">
            <a-radio value="student">毕业生</a-radio>
            <a-radio value="enterprise">企业</a-radio>
            <a-radio value="admin">管理员</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-button :disabled="disabled" class="login-form-button" html-type="submit" type="primary">
            Log in
          </a-button>

        </a-form-item>
        <a href="/register">现在去注册！</a>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {computed, reactive, toRaw} from 'vue';
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const formState = reactive({
  account: '',
  password: '',
  role: '',
});
import {useUserStore} from "@/stores/user.js";
const useStore = useUserStore();
const onFinish = async () => {
  const res = await useStore.getUserInfo(formState)
  if (res.data.flag) {
    success(res.data.message);
    console.log('success submit!', toRaw(formState));
    if(formState.role === 'student'){
      await router.replace('/student/studentHome');
    }
    if(formState.role === 'enterprise'){
      await router.replace('/enterprise/enterpriseHome');
    }
    if(formState.role === 'admin'){
      await router.replace('/admin/home');
    }

  } else {
    // error(res.data.message)
    console.log('error submit!', toRaw(formState));
  }

};
//气泡提示
import { message } from 'ant-design-vue';
const success = (msg) => {
  message.success(msg);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
  return !(formState.account && formState.password);
});
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh; /* 使父容器占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 从顶部开始排列 */
  background-image: url('src/assets/image/背景.jpg'); /* 设置背景图片 */
  background-size: cover; /* 或者使用 contain */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 使背景图片居中 */
  .title{
    margin-top: 160px;
    font-size: 30px;
  }
  .center {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8); /* 白色背景，透明度为0.8 */
    border-radius: 10px; /* 圆角 */
    padding: 50px; /* 内边距，可以根据需要调整 */
    width: auto; /* 宽度，可以根据需要调整 */
    height: auto; /* 高度，可以根据需要调整 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
  }
  .login-form-button{
    width: 300px;
    margin-bottom: 20px;
  }
}


</style>